<template>
  <div>
    <navbar class="partent">
      <template v-slot:center>
        <div class="center">
          <div
            class="detaill"
            v-for="(item, index) in detailbar"
            :key="index"
            :class="{ detailbar: index === count }"
            @click="getcolor(index)"
          >
            {{ item }}
          </div>
        </div>
      </template>
      <template v-slot:left>
        <div>
          <img src="@/assets/img/12.png" alt="" @click="backlast" />
        </div>
      </template>
    </navbar>
  </div>
</template>
<script>
import navbar from "@/components/common/navbar/navbar";
export default {
  components: {
    navbar,
  },
  data() {
    return {
      detailbar: ["商品", "参数", "评论", "推荐"],
      count: 0,
    };
  },
  methods: {
    getcolor(index) {
      this.count = index;
      this.$emit("goplace", index);
      // console.log(this.count);
    },
    backlast() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped>
.partent {
  border-bottom: 1px solid #eee;
  box-shadow: 0 1px 1px rgba(100, 100, 100, 0.08);
}
.center {
  display: flex;
}
.detaill {
  flex: 1;
  font-size: 14px;
}
.detailbar {
  color: pink;
}
img {
  width: 28px;
  height: 28px;
  margin-top: 7px;
}
</style>